<template>
  <div id="app-container">
    <div id="logi">
      <div id="header" style="display:flex; flex-direction: row; width: 100%;">
        <div style="width: 40%;">
          <div id="logo"><img src="../../assets/logo.jpg" alt=""></div>
        </div>
        <div style="width: 60%; display: flex;flex-direction: row; justify-content: flex-end; margin-right: 5%;">
          <div class="headerinfo"><a href="#">帮助中心</a></div>
          <div class="headerinfo"><a href="#">购物车</a></div>
          <div class="headerinfo"><a href="#">收藏夹</a></div>
          <div class="headerinfo"><a href="#">个人资料</a></div>
          <div class="headerinfo"><a href="#">退出登录</a></div>
          <div><el-avatar style="height: 100%; width: 100%;"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
        </div>
      </div>
    </div>
    
    <form @submit.prevent="handleSubmit" id="an">
      <div id="a">
        <div id="g">账号设置</div>
        <div class="g">安全设置</div>
        <div class="g">个人交易信息</div>
        <div class="g">收货地址</div>
        <div id="c">个人资料</div>
      </div>
      <div id="b">
        <div id="ba">个人资料</div>
        <div id="bb" style="width: 100%; height: 50px;">
          <div style="width:100%; height: 50px; display: flex; justify-content:space-evenly; border-top:1px solid black;border-bottom:1px solid black; align-items: center;">
            <el-row>
              <el-button id="caa" style="width: 100px;line-height: 40px; height: 40px;">
                个人资料
              </el-button>
              <el-button class="caa" style="width: 100px;line-height: 40px; height: 40px;">
                个人头像
              </el-button>
            </el-row>
          </div>
        </div>
        <div id="bc" style="font-size: 23px">
          亲爱的 {{aaa.name}}&ensp;&ensp;账号: {{aaa.id}}，填写你的资料可以让他（她）更好的找到你
        </div>
        <div id="bd" style="width:100%;height: 300px;  display: flex;">   
          <div style="line-height: 300px; margin: 0px 0px 0px 60px;">当前头像: </div>
          <div>
            <img src="../../assets/1.jpg" alt="" style="width: 300px;height: 300px; margin-left: 100px;">
          </div>
        </div>
        <div id="be" style="margin: 10px 0px 0px 20px;">
          您的名称：<input v-model="aab.name" type="text">
        </div>
        <div id="bf" style="margin: 10px 0px 0px 20px;"> 
          性别：
          <el-radio v-model="radio" label="1">男</el-radio>
          <el-radio v-model="radio" label="2">女</el-radio>
        </div>
        <div id="bg" style="width: 100%; height: 20px; display: flex; justify-content: center; align-items: center;">
  <button type="submit">保存</button>
</div>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const aaa = ref({
  name:'zs',
  id: '12345'
})

const aab = ref({
  name: ''
})

const radio = ref('1')

const handleSubmit = () => {
  console.log('提交的数据:', {
    id: aaa.value.id,
    name: aab.value.name,
    gender: radio.value
  })
  // 这里可以添加表单提交逻辑
}
</script>

<style>
#header,#footer{
    height: 100px;
    background-color: rgb(255, 174, 0);
  }

  #footer{
    height: 200px;
    /* margin-bottom: 0%; */
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .headerinfo{
    right: 5%;
    margin-right: 5%;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
  }

  .headerinfo a{
    text-decoration: none;
  } 

  #logininfo {
  
    margin-top:5%;
    /* margin-left: 10%; */
    height: 300px;
  }

  #logo{
    margin-left: 10%;
    height: 100px;
    width: 150px;
  }

  #logo img{
    width: 100%;
    height: 100%;
  }

#an{
    height: 630px;
    width: 1300px;
    /* background-color: red; */
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    display: flex;
}
#a{
    width: 300px;
    height: 630px;
    /* border: 1px solid rgb(254, 6, 6); */
    
    /* background-color: rgb(85, 85, 166); */
}
#b{
    width: 1000px;
    height: 630px;
    border: 1px solid rgb(15, 15, 15);
    /* background-color: rgb(114, 147, 169); */
 
}
#g{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
    background-color: rgb(236, 128, 141);
   
    text-align: center;
    font-size: 15px;
    /* 行高 */
    line-height: 40px;
    color: white;
}
#c{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
    background-color: rgb(207, 24, 45);
    text-align: center;
    font-size: 15px;
    line-height: 40px;
    color: white;
}
.g{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
 /* background-color: rgb(85, 85, 166); */
    text-align: center;
    font-size: 15px;

    line-height: 40px;
    color: black;
}
#ba{
    width: 1000px;
    height: 30x;
    /* border: 1px solid black; */
    display: flex;
    margin: 41px 0px 0px 50px;
    font-size: 40px;
}

</style>